{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="{{ ctx.app.config.staticUrl }}/css/index.css" rel="stylesheet" >
{% endblock %}

{# body代码#}
{% block body %}
    <!--container start-->
	<div class="container_white" id="order">
		<div class="container">
			<div class="title">欢迎订购食艺道套餐</div>
			<div class="intro">为保证您的最佳用餐体验，食艺道所有套餐均需提前一天订购，您现在预订的是x月x日主题套餐。</div>
			<ul class="order_list">
				<li class="order_item">
					<div class="order_number fl">1</div>
					<div class="order_name fl">意大利面</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxA" value="true"/>
							<label for="checkBoxA"></label>
						</div>
						<div class="choose_txt">麻辣</div>
					</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxB" value="true"/>
							<label for="checkBoxB"></label>
						</div>
						<div class="choose_txt">偏甜</div>
					</div>
					<div class="line">
						<img src="img/li_line.png"/>
					</div>
				</li>
				<li class="order_item">
					<div class="order_number fl">2</div>
					<div class="order_name fl">玫瑰松露巧克力</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxA" value="true"/>
							<label for="checkBoxA"></label>
						</div>
						<div class="choose_txt">微辣</div>
					</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxB" value="true"/>
							<label for="checkBoxB"></label>
						</div>
						<div class="choose_txt">麻辣</div>
					</div>
					<div class="line">
						<img src="img/li_line.png"/>
					</div>
				</li>
				<li class="order_item">
					<div class="order_number fl">3</div>
					<div class="order_name fl">意式茄汁肉酱面</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxA" value="true"/>
							<label for="checkBoxA"></label>
						</div>
						<div class="choose_txt">微辣</div>
					</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxB" value="true"/>
							<label for="checkBoxB"></label>
						</div>
						<div class="choose_txt">麻辣</div>
					</div>
					<div class="line">
						<img src="img/li_line.png"/>
					</div>
				</li>
				<li class="order_item">
					<div class="order_number fl">4</div>
					<div class="order_name fl">火腿蛋三明治</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxA" value="true"/>
							<label for="checkBoxA"></label>
						</div>
						<div class="choose_txt">偏甜</div>
					</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxB" value="true"/>
							<label for="checkBoxB"></label>
						</div>
						<div class="choose_txt">偏甜</div>
					</div>
					<div class="line">
						<img src="img/li_line.png"/>
					</div>
				</li>
				<li class="order_item">
					<div class="order_number fl">5</div>
					<div class="order_name fl">黑胡椒猪排</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxA" value="true"/>
							<label for="checkBoxA"></label>
						</div>
						<div class="choose_txt">偏甜</div>
					</div>
					<div class="choose_taste fr">
						<div class="choose-box fl">
							<input type="checkbox" class="checkBox" id="checkBoxB" value="true"/>
							<label for="checkBoxB"></label>
						</div>
						<div class="choose_txt">麻辣</div>
					</div>
					<div class="line">
						<img src="img/li_line.png"/>
					</div>
				</li>
			</ul>
			<div class="order_change">
				<div class="order_change_txt fl">注：每日每人只限订购最多2份。<a href="/customize">订购更多</a></div>
                <div class="totalMoney fr">￥99.90</div>
                <div class="quentity fr">
                    <a href="javascript:void(0);" class="fl minus" onclick="minus(this)">-</a>
                    <input type="text" disabled value="1" class="fl" id="meals_number">
                    <a href="javascript:void(0);" class="fl add" onclick="add(this)">+</a>
                </div>
			</div>
			<ul class="order_info_list">
				<li>
					<div class="order_info_img"></div>
					<p>以上套餐一般适用于一人食用， 对海鲜过敏者请谨慎选用。</p>
				</li>
				<li>
					<div class="order_info_img"></div>
					<p>为保证您的最佳用餐体验，所有餐品需提前1天在线订购，今日餐品不可当日预定。</p>
				</li>
				<li>
					<div class="order_info_img"></div>
					<p>为了尽量发挥出每道餐品的极致美味，食艺道的每份套餐都是经过精心研发和仔细搭配过的，建议您在品尝时可详细查看每道餐品的说明。</p>
				</li>
				<li>
					<div class="order_info_img"></div>
					<p>餐品配件包括：环保筷一双，环保汤匙一把，环保水瓶一个，垫桌巾一块，餐盒，外包装带。</p>
				</li>
			</ul>
			<div class="order_gift">
				<div class="order_gift_left fl">
					<div class="order_gift_icon">
					</div>
					<div class="gift_card">祝福卡片</div>
				</div>
				<!--礼物卡 留言-->
				<div class="order_gift_right fr">
					<div class="order_message">
						<input type="text" name="orderMessage" id="orderMessage" placeholder="您想写在卡片上的话..." />
					</div>
					<p>根据您的需要，食艺道可赠送祝福卡片，其内容显示分为以下两种</p>
					<p>1.根据您在下栏填写的详细内容，亲笔手写卡片；</p>
					<p>2.若内容处为空白，我们将自行为您手写日常祝福语。</p>
					<p style="margin-top: 30px;">一个暖心的小举动，让用餐人感受到您最真挚的祝福。</p>
				</div>						
			</div>
			<!--饮料选择
			<div class="drink">
				<div class="drink_left fl">
					<div class="drink_img">
						<img src="images/order/drink_03.png" alt="" />
					</div>
					<div class="all_free">IT’S ALL FREE!</div>
				</div>
				<div class="drink_right fr">
					<ul class="choose_list">
						<li class="fl">
							<div class="choose_box fl">
								<input type="checkbox" class="checkBox" id="checkCoffee" value="true"/>
								<label for="checkCoffee"></label>				
							</div>
							<div class="reg-style-txt fl">Coffee</div>
						</li>
						<li class="fl">
							<div class="choose_box fl">
								<input type="checkbox" class="checkBox" id="checkTea" value="true"/>
								<label for="checkTea"></label>				
							</div>
							<div class="reg-style-txt fl">Tea</div>
						</li>
						<li class="fl"> 
							<div class="choose_box fl">
								<input type="checkbox" class="checkBox" id="checkJuice" value="true"/>
								<label for="checkJuice"></label>				
							</div>
							<div class="reg-style-txt fl">Juice</div>
						</li>
						<li class="fl">
							<div class="choose_box fl">
								<input type="checkbox" class="checkBox" id="checkWater" value="true"/>
								<label for="checkWater"></label>				
							</div>
							<div class="reg-style-txt fl">Water</div>
						</li>
					</ul>
				</div>
			</div>-->
			<!--收货人信息-->
			<div class="consignee_info">
				<ul class="consignee_list">
					<li>
						<div class="consignee_txt fl">姓名</div>
						<input type="text" class="fl consignee_Name" name="consignee_Name" id="consignee_Name" value="" />
						<div class="cender fl">性别</div>
						<div class="fl choose_sex">
							<div class="woman-img fl">
							</div>	
							<div class="choose_box fl">
								<input type="checkbox" class="checkBox" id="checkBoxWoman" value="true"/>
								<label for="checkBoxWoman"></label>
							</div>	
						</div>
						<div class="fl choose_sex">
							<div class="man-img fl">
							</div>	
							<div class="choose_box fl">
								<input type="checkbox" class="checkBox" id="checkBoxMan" value="true"/>
								<label for="checkBoxMan"></label>
							</div>									
						</div>
					</li>
					<li>
						<div class="consignee_txt fl">手机</div>
						<input type="text" class="consignee_phone fl" name="consignee_phone" id="consignee_phone" value="" />
					</li>
					<li>
						<div class="consignee_txt fl">地址</div>
						<div class="address-select fl">
							<select class="select" name="city" id="city">
								<option>上海市</option>
							</select>
							<div class="dot-bottom"></div>
						</div>
						<div class="address-select fl" id="town">
							<select class="select" name="area">
								<option>长宁区</option>
								<option>静安区</option>
								<option>黄埔区</option>
								<option>徐汇区</option>
							</select>
							<div class="dot-bottom"></div>
						</div>
						<input type="text" class="consignee_address fl" name="consignee_address" id="consignee_address" value=""/>
					</li>
					<li>
						<div class="consignee_txt fl">时间</div>
						<div class="delivery-date fl">
							<select class="select" name="d_time" id="d_time">
								<option>05月20日</option>
								<option>05月21日</option>
								<option>05月22日</option>
								<option>05月23日</option>
								<option>05月24日</option>
								<option>05月25日</option>
								<option>05月26日</option>
							</select>
							<div class="dot-bottom"></div>
						</div>
						<div class="delivery-time fl">
							<select class="select" name="d_time" id="d_time">
								<option>10:30-11:00</option>
								<option>11:30-12:00</option>
								<option>12:30-13:00</option>
								<option>13:00-13:30</option>
							</select>
							<div class="dot-bottom"></div>
						</div>
						<div class="delivery-txt fl">请选择您的送餐时间</div>
					</li>
					<li>
						<div class="consignee_txt fl">需求</div>
						<textarea class="consignee_require fl" name="consignee_require" id="consignee_require" placeholder="" rows="" cols=""></textarea>
					</li>
				</ul>
			</div>
			<!--支付方式-->
			<div class="pay_way" id="pay_way">
				<div class="pay_way_title">支付方式</div>
				<div class="fl choose_pay">
					<div class="choose_box fl">
						<input type="checkbox" class="checkBox" id="chooseAlipay" value="true"/>
						<label for="chooseAlipay"></label>
					</div>	
					<div class="choose_img alipay fl">
					</div>
					<div class="choose_txt fl">支付宝</div>
				</div>
				<div class="fl choose_pay">
					<div class="choose_box fl">
						<input type="checkbox" class="checkBox" id="chooseWechat" value="true"/>
						<label for="chooseWechat"></label>
					</div>
					<div class="choose_img wechat fl">
					</div>	
					<div class="choose_txt fl">微信</div>
				</div>
			</div>
			<!--支付方式-->
			<div class="pay_way" id="conpons_choose">
				<div class="pay_way_title">优惠券选择</div>
				<div class="fl choose_pay">
					<div class="choose_box fl">
						<input type="checkbox" class="checkBox" id="chooseFive" value="true"/>
						<label for="chooseFive"></label>
					</div>
					<div class="choose_txt fl" style="margin-left: 15px;">5元优惠券</div>
				</div>
				<div class="fl choose_pay">
					<div class="choose_box fl">
						<input type="checkbox" class="checkBox" id="chooseTen" value="true"/>
						<label for="chooseTen"></label>
					</div>
					<div class="choose_txt fl" style="margin-left: 15px;">10元优惠券</div>
				</div>
			</div>
			<!--去付款-->
			<div class="reserve">
				<div class="want fn-left">
					<a href="/paymentList" id="countDown" class="trs">立即支付</a>
				</div>
				<ul class="number_list fn-left">
					<li class="number_item"></li>
					<li class="number_item"></li>
					<li class="number_item"></li>
					<li class="number_item"></li>
				</ul>
				<div class="reserve-right fl">
					<img src="img/50_01.png"/>
				</div>
			</div>
			<!--describution start-->
			<div class="describution">
				<div class="describution_title">目前接受配送范围（上海）</div>
				<p style="color: #7e7c5f;">每一份套餐，都是我们用心的作品，它强调美味可口、合理搭配、营养丰富、富有创意、注重细节。每一份套餐，都是我们用心的作品，它强调美味可口、合理搭配、营养丰富、富有创意、注重细节。每一份套餐，都是我们用心的作品，它强调美味可口、合理搭配、营养丰富、富有创意、注重细节。</p>
				<p style="font-family: '华文仿宋';margin-top: 20px;color: #7e7c5f;">「 除以上商圈外，其他商圈目前暂时不接受预订，敬请谅解。」</p>
			</div>
			<!--describution end-->
		</div>
	</div>
	<!--container end-->
{% endblock %}
{#js代码#}
{% block js %}
    <script type="text/javascript" src="{{ ctx.app.config.staticUrl }}/js/index.js"></script>	
{% endblock %}